<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>乐游大转盘</title>

<link href="{{asset('/lottery/css/zhuanPan.css')}}" rel="stylesheet" type="text/css">

<script type="text/javascript" src="{{asset('/lottery/js/jquery-1.10.2.js')}}"></script>
<script type="text/javascript" src="{{asset('/lottery/js/awardRotate.js')}}"></script>

<script type="text/javascript">
var turnplate={
		restaraunts:[],				//大转盘奖品名称
		colors:[],					//大转盘奖品区块对应背景颜色
		outsideRadius:192,			//大转盘外圆的半径
		textRadius:155,				//大转盘奖品位置距离圆心的距离
		insideRadius:68,			//大转盘内圆的半径
		startAngle:0,				//开始角度
		bRotate:false				//false:停止;ture:旋转
};
var draw_num = {{$today_draw_num}}; // 当前抽奖次数

$(document).ready(function(){
	//动态添加大转盘的奖品与奖品区域背景颜色
	turnplate.restaraunts = ["银票5张", "话费5元", "话费100元", "话费10元", "话费50元", "话费20元", "乐游兑换券10张 ", "话费1元", "银票3张", "话费3元"];
	turnplate.colors = ["#f69814", "#fcc60c", "#f69814", "#fcc60c","#f69814", "#fcc60c", "#f69814", "#fcc60c","#f69814", "#fcc60c"];

	
	var rotateTimeOut = function (){
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:2160,
			duration:8000,
			callback:function (){
				alert('网络超时，请检查您的网络设置！');
			}
		});
	};

	//旋转转盘 item:奖品位置; txt：提示语;
	var rotateFn = function (item, txt){
		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
		if(angles<270){
			angles = 270 - angles; 
		}else{
			angles = 360 - angles + 270;
		}
		$('#wheelcanvas').stopRotate();
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:angles+1800,
			duration:8000,
			callback:function (){
				alert('恭喜中奖：' + txt);
				turnplate.bRotate = !turnplate.bRotate;
			}
		});
	};

	$('.pointer').click(function (){
		if (draw_num <= 0) {
			alert('今日抽奖次数已用完~~');
			return;
		}
		if(turnplate.bRotate)return;
		turnplate.bRotate = !turnplate.bRotate;
		//获取随机数(奖品个数范围内)
//		var item = rnd(1,turnplate.restaraunts.length);
		// 后台设置随机数
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/mobile/lottery/draw_lottery/'+ "{{$user->id}}",
            data: {
            	next_user: "{{$next_user}}"
            },
            success: function (data) {
                if (data.flag) {
					var item = data.data;
					//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
					rotateFn(item, turnplate.restaraunts[item-1]);
					draw_num--;//抽奖次数减1
					$('.cishu-num').text(draw_num);
                } else {
                	alert(data.msg);
                }
            }
        });  
	});
	
	// 活动规则
	$('.rule-btn').click(function (){
		console.log('活动规则')
		$('.rule-wrap').show()
		$('.mask').show()
	})
	$('.rule-wrap .close-btn').click(function() {
		$('.rule-wrap').hide()
		$('.mask').hide()
	})
	// 中奖纪录
	$('#zjBtn').click(function (){
		console.log('中奖纪录')
		$('.zj-wrap').show()
		$('.mask').show()
	})
	$('.zj-wrap .close-btn').click(function() {
		$('.zj-wrap').hide()
		$('.mask').hide()
	})
	// 邀请记录
	$('#yqBtn').click(function (){
		console.log('邀请记录')
		$('.yq-wrap').show()
		$('.mask').show()
	})
	$('.yq-wrap .close-btn').click(function() {
		$('.yq-wrap').hide()
		$('.mask').hide()
	})
	// 中奖纪录切换界面
	$('.zj-top-item').click(function() {
		var flag = $(this).attr('data-state')
		console.log(flag)
		if(flag === '0') { // 我的纪录
			$(this).addClass('active')
			$(this).siblings().removeClass('active')
			$('.zj-con2').hide()
			$('.zj-con1').show()
		} else { // 幸运玩家
			$(this).addClass('active')
			$(this).siblings().removeClass('active')
			$('.zj-con1').hide()
			$('.zj-con2').show()
		}
	})
});

function rnd(n, m){
	var random = Math.floor(Math.random()*(m-n+1)+n);
	return random;
	
}


//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
	drawRouletteWheel();
};

function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {
	  //根据奖品个数计算圆周角度
	  var arc = Math.PI / (turnplate.restaraunts.length/2);
	  var ctx = canvas.getContext("2d");
	  //在给定矩形内清空一个矩形
	  ctx.clearRect(0,0,460,460);
	  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
	  ctx.strokeStyle = "#FFBE04";
	  //font 属性设置或返回画布上文本内容的当前字体属性
	  ctx.font = '16px Microsoft YaHei';      
	  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
		  var angle = turnplate.startAngle + i * arc;
		  ctx.fillStyle = turnplate.colors[i];
		  ctx.beginPath();
		  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
		  ctx.arc(230, 230, turnplate.outsideRadius, angle, angle + arc, false);    
		  ctx.arc(230, 230, turnplate.insideRadius, angle + arc, angle, true);
		  ctx.stroke();  
		  ctx.fill();
		  //锁画布(为了保存之前的画布状态)
		  ctx.save();   
		  
		  //----绘制奖品开始----
		  ctx.fillStyle = "#FFFFFF";
		  var text = turnplate.restaraunts[i];
		  var line_height = 32;
		  //translate方法重新映射画布上的 (0,0) 位置
		  ctx.translate(230 + Math.cos(angle + arc / 2) * turnplate.textRadius, 230 + Math.sin(angle + arc / 2) * turnplate.textRadius);
		  
		  //rotate方法旋转当前的绘图
		  ctx.rotate(angle + arc / 2 + Math.PI / 2);
		  
		  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
		  if(text.indexOf("票")>0){ // 银票
			  var texts = text.split("票");
			  for(var j = 0; j<texts.length; j++){
				  ctx.font = j == 0?'bold 24px Microsoft YaHei':'18px Microsoft YaHei';
				  if(j == 0){
					  ctx.fillText(texts[j]+"票", -ctx.measureText(texts[j]+"票").width / 2, j * line_height);
				  }else{
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				  }
			  }
		  } else if (text.indexOf("费")>0) {
		  	var texts = text.split("费");
			for(var j = 0; j<texts.length; j++){
				ctx.font = j == 0?'bold 24px Microsoft YaHei':'18px Microsoft YaHei';
			if(j == 0){
				ctx.fillText(texts[j]+"费", -ctx.measureText(texts[j]+"费").width / 2, j * line_height);
				}else{
					ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				}
			}
		  } else if (text.indexOf("券")>0) {
		  	var texts = text.split("券");
			for(var j = 0; j<texts.length; j++){
				ctx.font = j == 0?'bold 18px Microsoft YaHei':'18px Microsoft YaHei';
			if(j == 0){
				ctx.fillText(texts[j]+"券", -ctx.measureText(texts[j]+"券").width / 2, j * line_height);
				}else{
					ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				}
			}
		  } else if(text.indexOf("票") == -1 && text.length>6){//奖品名称长度超过一定范围
			  text = text.substring(0,6)+"||"+text.substring(6);
			  var texts = text.split("||");
			  for(var j = 0; j<texts.length; j++){
				  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
			  }
		  }else{
			  //在画布上绘制填色的文本。文本的默认颜色是黑色
			  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
			  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
		  }
		  
		  //添加对应图标
		  if(text.indexOf("银票")>=0){
			  var img= document.getElementById("yp-img");
			  img.onload=function(){  
				  ctx.drawImage(img,-15,46,30,30);      
			  }; 
			  ctx.drawImage(img,-15,46,30,30);
		  }else if(text.indexOf("话费")>=0){
			  var img= document.getElementById("hf-img");
			  img.onload=function(){  
				  ctx.drawImage(img,-15,46,30,30);      
			  };  
			  ctx.drawImage(img,-15,46,30,30);  
		  }else if(text.indexOf("兑换券")>=0){
			  var img= document.getElementById("dhq-img");
			  img.onload=function(){  
				  ctx.drawImage(img,-15,46,30,30);      
			  };  
			  ctx.drawImage(img,-15,46,30,30);  
		  }
		  //把当前画布返回（调整）到上一个save()状态之前 
		  ctx.restore();
		  //----绘制奖品结束----
	  }     
  } 
}

function hideIntro() {
	$('.intro-mask').hide();
}

function download() {
	window.location = "https://fir.im/91z4";
}
</script>
</head>
<body>
    <img src="{{asset('/lottery/images/icon-yinpiao.png')}}" id="yp-img" style="display:none;" />
    <img src="{{asset('/lottery/images/icon-huafei.png')}}" id="hf-img" style="display:none;" />
    <img src="{{asset('/lottery/images/icon-quan.png')}}" id="dhq-img" style="display:none;" />
	<div class="banner">
		<div class="turnplate">
			<canvas class="item" id="wheelcanvas" width="460px" height="460px"></canvas>
			<img class="pointer" src="{{asset('/lottery/images/pointer.png')}}"/>
		</div>
	</div>
	<img class="rule-btn" src="{{asset('/lottery/images/ruleBtn.png')}}"/>
	<div class="jiantou-wrap">
		<img class="jiantou" src="{{asset('/lottery/images/jiantou.png')}}"/>
		<div>点击分享</div>
	</div>
	<div class="intro-mask" onclick="hideIntro()">
		<div class="tips">
			<img class="jiantou" src="{{asset('/lottery/images/jiantouLeft.png')}}"/>
			<div>点击红包按钮<br/>即可查看规则</div>
		</div>
	</div>
	<div class="cishu">我的抽奖次数<span class="cishu-num">{{$today_draw_num}}</span>次</div>
	<div class="btn-wrap">
		<img class="xiazai-btn" src="{{asset('/lottery/images/xiazai.png')}}" onclick="download()"/>
		<img id="zjBtn" src="{{asset('/lottery/images/zjBtn.png')}}"/>
		<img id="yqBtn" src="{{asset('/lottery/images/yqBtn.png')}}"/>
	</div>
	<div class="mask"></div>
	<div class="rule-wrap">
		<img class="rule-text" src="{{asset('/lottery/images/ruleText.png')}}"/>
		<img class="close-btn" src="{{asset('/lottery/images/close-btn.png')}}"/>
	</div>
	<div class="yq-wrap">
		<div class="yq-text">
			<div style="height: 62px;"></div>
			<div class="kuang3">
				<div class="li">
					<div class="item2">邀请人</div>
					<div class="item2">邀请时间</div>
					<div class="item2">状态</div>
				</div>
				@foreach($my_invite_users as $user)
					<div class="li">
						<div class="item2">
							<img class="yq-portrait" src="{{$user->headimg}}" style="width:42px;height:46px"/>
							<div>{{base64_decode($user->name)}}</div>
						</div>
						<div class="item2">{{$user->created_at}}</div>
						<div class="item2">
							@if($user->checkFiveGames() >= 5)
								<img class="yq-state" src="{{asset('/lottery/images/icon-state-yes.png')}}"/>
							@else
								<img class="yq-state" src="{{asset('/lottery/images/icon-state-no.png')}}"/>
							@endif
						</div>
					</div>
				@endforeach
			</div>
		</div>
		<img class="close-btn" src="{{asset('/lottery/images/close-btn.png')}}"/>
	</div>
	<div class="zj-wrap">
		<div class="zj-text">
			<div class="zj-top">
				<div class="zj-top-item active" data-state="0">我的纪录</div>
				<div class="zj-top-item" data-state="1">幸运玩家</div>
			</div>
			<div class="zj-con1">
				<div class="portrait">
					<img src="{{$user->headimg}}" style="width:42px;height:46px" />
				</div>
				<div class="mine-name">{{base64_decode($user->name)}}</div>
				<div class="kuang">
					<div class="li">
						<div class="item item-1">中奖时间</div>
						<div class="item item-2">奖品</div>
					</div>
					@foreach($lottery_logs as $lottery)
						<div class="li">
							<div class="item item-1">{!! str_limit($lottery->created_at, 10, '') !!}</div>
							<div class="item item-2">
								@if(in_array($lottery->price_id, [2,4]))
									<img src="{{asset('/lottery/images/icon-yinpiao.png')}}"/>
								@elseif(in_array($lottery->price_id, [9]))
									<img src="{{asset('/lottery/images/icon-quan.png')}}"/>
								@elseif(in_array($lottery->price_id, [1,3,5,6,7,8,10]))
									<img src="{{asset('/lottery/images/icon-huafei.png')}}"/>
								@endif
								<div>{{$lottery->price_name}}</div>
							</div>
						</div>
					@endforeach
				</div>
			</div>
			<div class="zj-con2">
				<div class="kuang2">
					<div class="li">
						<div class="item2">中奖时间</div>
						<div class="item2">中奖人</div>
						<div class="item2">奖品</div>
					</div>
					@foreach($lucky_logs as $logs)
						<div class="li">
							<div class="item2">{!! str_limit($logs->created_at, 10, '') !!}</div>
							<div class="item2">{{$logs->draw_name}}</div>
							<div class="item2">{{$logs->price_name}}</div>
						</div>
					@endforeach
				</div>	
			</div>
		</div>
		<img class="close-btn" src="{{asset('/lottery/images/close-btn.png')}}"/>
	</div>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	wx.config(<?php echo $js->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
	wx.ready(function(){
		wx.onMenuShareAppMessage({
		    title: '乐游欢乐棋牌，微信群邀请好友来玩就送话费大奖', // 分享标题
		    desc: '邀请好友进行3圈（1圈=4局，3圈=12局）以上游戏，就能获得抽奖机会，100%中奖快来参加！', // 分享描述
		    link: '{{$url}}?invite_id='+"{{$user->userid}}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: 'http://user.leyougame.cc/lottery/images/hongbao.jpg', // 分享图标
		    type: 'link', // 分享类型,music、video或link，不填默认为link
		    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		    success: function () {
		        // 用户确认分享后执行的回调函数
		    },
		    cancel: function () {
		        // 用户取消分享后执行的回调函数
		    }
		});

		wx.onMenuShareTimeline({
		    title: '乐游欢乐棋牌，微信群邀请好友来玩就送话费大奖!', // 分享标题
		    link: '{{$url}}?invite_id='+"{{$user->userid}}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: 'http://user.leyougame.cc/lottery/images/hongbao.jpg', // 分享图标
		    success: function () {
		    // 用户点击了分享后执行的回调函数
			},
		});

   	});
   	wx.error(function(res){

	});

</script>

</html>